// nope
<template>
  <div class="home-swiper">
    <div class="search_bar">
      <!-- 搜索歌曲 -->
      <input
        type="text"
        autocomplete="off"
        v-model="query"
        @keyup.enter="searchMusic"
      />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <van-image
          class="my-image"
          v-lazy="item.imageUrl"
          :src="item.imageUrl"
        />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      banners: [],
      // 查询
      query: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      console.log("如果这都没有那我就是真的没话说 了");
      this.$request("get", "/banner").then((res) => {
        console.log(res);
        this.banners = res.banners;
      });
    },
    searchMusic() {
      const query = this.query;
      console.log("传过去的：" + query);
      this.$router.push({ path: `/search/${query}` });
    },
  },
};
</script>
<style scoped>
.search_bar {
  height: 60px;
  background-color: rgb(255, 112, 112);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 11;
}
.search_bar input {
  width: 90%;
  height: 34px;
  border-radius: 17px;
  border: 0px;
  background: 265px center no-repeat rgba(255, 255, 255, 0.45);
  text-indent: 15px;
  outline: none;
}
.my-swipe {
  margin: 1rem;
  border-radius: 1rem;
}
</style>
